<template>
    <div class="conter">
      <dv-full-screen-container>
        <dv-border-box-11 title="大屏监测系统">
          <div class="load" v-if="!this.loadinge">
            <dv-loading>Loading...</dv-loading>
          </div>
          <!-- 遮罩层 -->
          <div class="shade" v-if="!this.loadinge">1</div>
          <baidu-map
            :center="center"
            :zoom="zoom"
            @ready="handler"
            class="baidu-map"
          >
            <div class="left">
              <div class="one">
                <dv-border-box-13>
                    <dv-decoration-1 style="width:200px;height:50px;" />
                </dv-border-box-13>
              </div>
              <div class="two">
                <dv-border-box-10>
                    <dv-conical-column-chart :config="config" style="width:400px;height:200px;" />
                </dv-border-box-10>
              </div>
              <div class="three">
                <dv-border-box-10 :color="['#5378a2', '#FFF']"></dv-border-box-10>
              </div>
            </div>
            <div class="right">
              <div class="fore">
                <dv-border-box-13></dv-border-box-13>
              </div>
              <div class="four">
                <dv-border-box-10 :color="['#5378a2', '#FFF']"></dv-border-box-10>
              </div>
              <div class="six">
                <dv-border-box-10 :color="['#5378a2', '#FFF']"></dv-border-box-10>
              </div>
            </div>
            <!-- 监管时间 -->
            <div class="monitor">
              <div class="txt">系统监测时间</div>
              <div class="reader">
                <div>
                  <i>{{ day }}</i
                  >天
                </div>
                <div>
                  <i>{{ hour }}</i
                  >时
                </div>
                <div>
                  <i>{{ minute }}</i
                  >分
                </div>
                <div>
                  <i>{{ second }}</i
                  >秒
                </div>
              </div>
            </div>
          </baidu-map>
          <!-- 当前日期+当前星期 -->
          <div class="datae">
            {{ nowDate + ' ' + nowWeek }}
          </div>
          <!-- 当前时间 -->
          <div class="timer">
            {{ nowTime }}
          </div>
        </dv-border-box-11>
      </dv-full-screen-container>
    </div>
  </template>
  <script>
  // import { getTokenTime } from '@/utils/auth'
  export default {
    name: 'iot',
    data() {
      return {
        center: { lng: 116.31438, lat: 40.04283 },
        zoom: 18,
        // 动画开光
        loadinge: false,
        nowDate: '', // 当前日期
        nowTime: '', // 当前时间
        nowWeek: '', // 当前星期
        day: '0', //当前天数
        hour: '0', //当前小时
        minute: '0', //当前分钟
        second: '0', //当前秒数
        dialogTableVisible: false,
        config: { 
            data: ['foo', 'foo']
        }
      }
    },
    mounted() {
      this.currentTime()
    },
    // 销毁定时器
    beforeDestroy() {
        clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
        clearInterval(this.monitortime)
    },
    methods: {
      handler({ BMap, map }) {
        let that = this
        // 经度
        this.center.lng = 116.31438
        // 维度
        this.center.lat = 40.04283
        // 地图放大等级
        this.zoom = 17
        map.enableScrollWheelZoom() // 启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom() // 可拖拽
        var mapStyle={  style : "midnight" }  
        map.setMapStyle(mapStyle);
        // 地图个性化样式
        // try {
        //   map.setMapStyleV2({
        //     styleId: 'ff0f8e558db57f3ffded496d28293492'
        //   })
        // } catch (erro) {
        //     console.log(erro)
        //   return false
        // }
        // 这个是遮罩层和加载动画的开关 默认一进到页面加载动画和遮罩层是开启的
        // 还有一个作用就是网络不好时，百度地图加载失败时。会出现白屏现象，加上这个遮罩层和加载动画会显得比较          流畅
        setTimeout(() => {
          this.loadinge = true
        }, 3000)
      },
      // 每0.5秒执行一次
      currentTime() {
        setInterval(this.getDate, 500)
        setInterval(this.monitortime, 1000)
      },
      // 获取当前日期时间的方法
      getDate() {
        var _this = this
        //获取年
        let yy = new Date().getFullYear()
        //获取月,注意时间是0-11，0代表1月份
        let mm = new Date().getMonth() + 1
        // 获取具体哪一天
        let dd = new Date().getDate()
        // 获取星期 0-6 0是星期天
        let week = new Date().getDay()
        //获取小时
        let hh = new Date().getHours()
        //获取分钟
        let ms =
          new Date().getSeconds() < 10
            ? '0' + new Date().getSeconds()
            : new Date().getSeconds()
        // 获取秒钟
        let mf =
          new Date().getMinutes() < 10
            ? '0' + new Date().getMinutes()
            : new Date().getMinutes()
        // 获取星期
        if (week == 1) {
          this.nowWeek = '星期一'
        } else if (week == 2) {
          this.nowWeek = '星期二'
        } else if (week == 3) {
          this.nowWeek = '星期三'
        } else if (week == 4) {
          this.nowWeek = '星期四'
        } else if (week == 5) {
          this.nowWeek = '星期五'
        } else if (week == 6) {
          this.nowWeek = '星期六'
        } else {
          this.nowWeek = '星期日'
        }
        _this.nowTime = hh + ':' + mf + ':' + ms
        _this.nowDate = yy + '/' + mm + '/' + dd
      },
      // 监测时间
      monitortime() {
     var _that = this
        // 当前时间
        let x = new Date().getTime()
        //   // 点击登录存的时间
        //   //   let y = getTokenTime()
        //   // console.log('登录时间戳', y)
        //   // 登录之后的监测时间
        //   let z = x - y
        //   // console.log('监测时间', z)
        _that.day = parseInt(x / 1000 / 60 / 60 / 24) //日
        _that.hour = parseInt((x / 1000 / 60 / 60) % 24) //时
        _that.minute = parseInt((x / 1000 / 60) % 60) //分
        _that.second = parseInt((x / 1000) % 60) //秒
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .conter {
    background-color: rgb(9, 18, 32);
    width: 100%;
    height: 100%;
    // box-sizing: border-box;
    // 最大边框的样式
    ::v-deep #dv-full-screen-container {
      .dv-border-box-11 .border-box-content {
        // background-color: skyblue;
        padding: 62px 9px 10px;
        overflow: hidden;
        border-radius: 55px;
        position: relative;
        .load {
          position: absolute;
          top: 40%;
          left: 50%;
          // margin-left: -37px;
          transform: translateX(-50%);
          z-index: 3;
          .loading-tip {
            margin-top: 15px;
            font-size: 18px;
            color: #fff;
          }
        }
        // 遮罩层
        .shade {
          width: 100%;
          // width: 100%; 取100% margin 右边不会生效 要改成width=99%才有效果
          height: 100%;
          box-sizing: border-box !important;
          // background-color: skyblue;
          margin: 60px 8px 10px;
          background-color: rgb(9, 18, 32);
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
        }
        // 地图
        .baidu-map {
          width: 100%;
          height: 100%;
          border-radius: 5px;
          // z-index: 999;
          display: flex;
          // justify-content: space-between;
          // 去除百度地图的图标
          position: relative;
          .anchorBL {
            display: none !important;
          }
          .left {
            width: 350px;
            height: 100%;
            position: absolute;
            top: 100px;
            left: 2%;
            // background-color: skyblue;
            // margin-left: 50px;
            .one {
              height: 130px;
              // background-color: skyblue;
            }
            .two {
              height: 250px;
              background-color: rgb(2, 52, 126);
              border-radius: 3px;
              margin: 40px 0 40px;
            }
            .three {
              height: 250px;
              background-color: rgb(2, 52, 126);
              border-radius: 3px;
            }
          }
          .right {
            width: 350px;
            height: 100%;
            position: absolute;
            top: 100px;
            right: 2%;
            // background-color: skyblue;
            // margin-right: 50px;
            .fore {
              height: 130px;
              // background-color: skyblue;
            }
            .four {
              height: 250px;
              background-color: rgb(2, 52, 126);
              border-radius: 3px;
              margin: 40px 0 40px;
            }
            .six {
              height: 250px;
              background-color: rgb(2, 52, 126);
              border-radius: 3px;
            }
          }
          // 监测时间
          .monitor {
            width: 320px;
            height: 95px;
            // background-color: skyblue;
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            .txt {
              width: 135px;
              color: #fff;
              font-size: 22px;
              margin: 2px auto;
            }
            .reader {
              color: #afafaf;
              display: flex;
              justify-content: space-between;
              margin-top: 12px;
              div {
                display: flex;
                align-items: baseline;
                i {
                  font-style: normal;
                  display: block;
                  width: 50px;
                  height: 50px;
                  box-sizing: border-box;
                  font-size: 20px;
                  color: #fff;
                  margin-right: 8px;
                  background-color: rgb(5, 47, 115);
                  border: 3px solid rgb(6, 116, 190);
                  border-radius: 5px;
                  line-height: 44px;
                  text-align: center;
                }
                 &:first-child {
                  i {
                      width: 80px;
                  }
                }
              }
            }
          }
        }
        // 左上角日期星期
        .datae {
          // background-color: skyblue;
          font-size: 18px;
          position: absolute;
          top: 7px;
          left: 200px;
          color: #fff;
        }
        // 右上角的当前时间
        .timer {
          // background-color: skyblue;
          font-size: 18px;
          position: absolute;
          top: 7px;
          right: 200px;
          color: #fff;
        }
      }
    }
  }
  </style>